<template>
  <div
    ref="box"
    class="box"
    :class="device == 'mobile' ? 'mobile-box' : 'pc-box'"
  >
    <div id="video-container"></div>
  </div>
</template>

<script>
import EZUIKit from "ezuikit-js";
import { mapGetters } from "vuex";
import { immsVideoUrlGet } from "@/api/home/main";
export default {
  name: "",
  data() {
    return {
      player: null,
      url: "",
      accessToken: "",
    };
  },
  computed: {
    ...mapGetters(["sidebar", "avatar", "device"]),
  },
  async mounted() {
    let res = await immsVideoUrlGet();
    let { Url, accessToken } = res.data;
    this.url = Url;
    this.accessToken = accessToken;

    setTimeout(() => {
      this.getVideoData();
    }, 2000);
  },

  beforeDestroy() {
    this.playerDestroy(); //销毁并停止直播视频
  },
  methods: {
    getVideoData() {
      let themeData = {
        header: {
          color: "#1890ff",
          activeColor: "#FFFFFF",
          backgroundColor: "#000000",
          btnList: [
            {
              iconId: "deviceID",
              part: "left",
              defaultActive: 0,
              memo: "顶部设备序列号",
              isrender: 1,
            },
            {
              iconId: "deviceName",
              part: "left",
              defaultActive: 0,
              memo: "顶部设备名称",
              isrender: 1,
            },
            {
              iconId: "cloudRec",
              part: "right",
              defaultActive: 0,
              memo: "云存储",
              isrender: 0,
            },
            {
              iconId: "rec",
              part: "right",
              defaultActive: 0,
              memo: "SD卡回放",
              isrender: 0,
            },
          ],
        },
        footer: {
          color: "#FFFFFF",
          activeColor: "#1890FF",
          backgroundColor: "#00000021",
          btnList: [
            {
              iconId: "play",
              part: "left",
              defaultActive: 1,
              memo: "播放",
              isrender: 1,
            },
            {
              iconId: "capturePicture",
              part: "left",
              defaultActive: 0,
              memo: "截屏按钮",
              isrender: 1,
            },
            {
              iconId: "sound",
              part: "left",
              defaultActive: 0,
              memo: "声音按钮",
              isrender: 1,
            },
            {
              iconId: "pantile",
              part: "left",
              defaultActive: 0,
              memo: "云台控制按钮",
              isrender: 1,
            },
            {
              iconId: "recordvideo",
              part: "left",
              defaultActive: 0,
              memo: "录制按钮",
              isrender: 1,
            },
            {
              iconId: "talk",
              part: "left",
              defaultActive: 0,
              memo: "对讲按钮",
              isrender: 1,
            },
            {
              iconId: "zoom",
              part: "left",
              defaultActive: 0,
              memo: "电子放大",
              isrender: 1,
            },
            {
              iconId: "hd",
              part: "right",
              defaultActive: 0,
              memo: "清晰度切换按钮",
              isrender: 1,
            },
            {
              iconId: "webExpend",
              part: "right",
              defaultActive: 0,
              memo: "网页全屏按钮",
              isrender: 1,
            },
            {
              iconId: "expend",
              part: "right",
              defaultActive: 0,
              memo: "全局全屏按钮",
              isrender: 1,
            },
          ],
        },
      };

      this.playerDestroy();
      // 调用前先暂停销毁视频
      this.$nextTick(() => {
        this.player = new EZUIKit.EZUIKitPlayer({
          id: "video-container", // 视频容器ID
          accessToken: this.accessToken, // token
          url: this.url, // 地址
          audio: 0, // 是否默认开启声音 0 - 关闭 1 - 开启
          // autoplay: false,
          // template: "security", // 显示模式
          width: this.$refs.box.offsetWidth, // 宽度
          height: 400, // 高度
          themeData: themeData,
        });

        window.onresize = () => {
          this.player.reSize(
            this.$refs.box.offsetWidth,
            this.$refs.box.offsetHeight
          );
        };
      });
    },

    // 暂停销毁视频
    playerDestroy() {
      if (this.player) {
        this.player.stop();
      }
    },
  },
};
</script>
<style lang="scss" scoped>
.box {
  width: 100%;
  text-align: center;
}
.mobile-box {
  height: 740px;
  ::v-deep #mobile-ez-ptz-container .mobile-ez-ptz-container {
    width: 190px !important;
    height: 190px !important;
    border: none;
    background: #8792ec;
  }
  ::v-deep .mobile-ez-ptz-wrap {
    padding: 0 !important;
  }
  ::v-deep .mobile-ez-ptz-wrap {
    background-color: #8792ec;
  }
  ::v-deep
    #mobile-ez-ptz-container
    .mobile-ez-ptz-container
    .mobile-ez-ptz-icon.top {
    border-bottom-color: white !important;
  }
  ::v-deep
    #mobile-ez-ptz-container
    .mobile-ez-ptz-container
    .mobile-ez-ptz-icon.right {
    border-left-color: white !important;
  }
  ::v-deep
    #mobile-ez-ptz-container
    .mobile-ez-ptz-container
    .mobile-ez-ptz-icon.left {
    border-right-color: white !important;
  }
  ::v-deep
    #mobile-ez-ptz-container
    .mobile-ez-ptz-container
    .mobile-ez-ptz-icon.bottom {
    border-top-color: white !important;
  }
}
.pc-box {
  height: 440px;
}
</style>
